<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="test">
			<com1 v-bind:parentmsg="msg" @childfunc="update"></com1>
		</div>
		<template id="tpl">
			<h1 @click="change">父组件的信息：{{ parentmsg }}</h1>
		</template>

		<script>
			let com1 = {
				template: `#tpl`,
				props: ["parentmsg"],
				methods: {
					change(){
						//this.parentmsg = '在子组件里面改变';
						this.$parent._data.msg = "在子组件里面改变";
						// $parent获取上层对象
						console.log(this.$parent._data.msg);
						console.log(this.parentmsg)

						this.$emit('childfunc','子组件传递来的值')
					}
				}
			}
			var vue = new Vue({
				el:'#test',
				data:{
					msg: "我是爸爸"
				},
				components:{
					com1
				},
				methods: {
					update(val){
						this.msg = val
						console.log(this.msg)
					}
				}
			})
		</script>
	</body>
</html>
